<template>
  <div>
    <base-modal 
      :title="title" 
      :show.sync="visible" 
      width="480px" 
      :close-on-click-modal="false"
    >
      <el-form 
        ref="consumeFormRef" 
        :model="consumeForm" 
        :rules="rules" 
        label-position="top" 
        class="consume-form"
      >
        <el-form-item v-if="this.propertyType === 0" :label="$t('member.components.title56')" prop="num">
          <el-input 
            type="number" 
            v-model="consumeForm.num" 
            :min="0" 
            :placeholder="$t('common.base.tip.defaultPlaceholder')"
          >
          </el-input>
        </el-form-item>

        <el-form-item v-else :label="$t('member.components.title66')" prop="balanceNum">
          <el-input 
            type="number" 
            v-model="consumeForm.balanceNum" 
            :min="0" 
            :placeholder="$t('common.base.tip.defaultPlaceholder')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('common.base.remark')" prop="remark">
          <el-input 
            v-model="consumeForm.remark"
            :placeholder="$t('common.base.tip.defaultPlaceholder')"
            maxlength="20"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{ $t('common.base.close') }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{ $t('common.base.confirm') }}</el-button>
      </div>
    </base-modal>
  </div>
</template>

<script>
import MathUtil from '@src/util/math';
import { memberConsume } from '@src/api/Member'

export default {
  name: 'ConsumeDialog',
  data() {
    const checkNum = (rule, value, callback) => {
      const count = MathUtil.decimalNumber(value);
      if (!value) {
        callback(new Error(this.$t('member.components.title57')));
      } else if (value <= 0 || count > 0) {
        callback(new Error(this.$t('member.components.title58')));
      } else {
        callback();
      }
    };
    const checkBalanceNum = (rule, value, callback) => {
      const count = MathUtil.decimalNumber(value);
      if (!value) {
        callback(new Error(this.$t('member.components.title68')));
      } else if (value <= 0) {
        callback(new Error(this.$t('member.components.title67')));
      }  else if (count > 2) {
        callback(new Error(this.$t('common.currency.exchangeRateLimit4')));
      }else {
        callback();
      }
    };
    

    return {
      details: '',
      propertyType: 0,
      visible: false,
      consumeForm: {
        num: '',
        balanceNum: '',
        remark: '',
      },
      rules: {
        num: [
          { required: true, validator: checkNum, trigger: 'change' },
        ],
        balanceNum: [
          { required: true, validator: checkBalanceNum, trigger: 'change' },
        ],
      }
    }
  },
  computed: {
    title() {
      return this.propertyType === 0 ? this.$t('member.components.title54') : this.$t('member.components.title55');
    }
  },
  methods: {
    open(row, type) {
      this.$refs.consumeFormRef?.resetFields();

      this.details = row;
      this.propertyType = type === 'point' ? 0 : 1;
      this.visible = true;
    },
    async handleConfirm() {
      if (this.propertyType === 0 && this.consumeForm.num > this.details?.points) {
        return this.$message.error(this.$t('member.components.title59'));
      }
      if (this.propertyType === 1 && this.consumeForm.balanceNum > this.details?.balance) {
        return this.$message.error(this.$t('member.components.title62'));
      }
      let { num, balanceNum, remark } = this.consumeForm
      const params = {
        memberId: this.details?.id,
        propertyType: this.propertyType,
        remark,
        num: this.propertyType === 0 ? num : balanceNum
      }
      const { code } = await memberConsume(params)
      if (code !== 0) {
        return this.$message.error(this.$t('member.components.title61'));
      }

      this.$message.success(this.$t('member.components.title60'));
      this.$refs.consumeFormRef?.resetFields();
      this.$emit('updateList')
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.consume-form {
  padding: 20px 30px;
}
</style>
